--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit 077d56ffdfc1ca4dde68d854216dc2552cbc2424
Parents : 7df8905
Author : Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-04-08T16:25:22-05:00
style(Interface, InterfacesPage): update UI elements with improved styling and responsiveness for offline and restart overlays
Changes
2 files changed, 7 insertions(+), 7 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/interfaces/Interface.vue b/meshchatx/src/frontend/components/interfaces/Interface.vue
index 1cd6c07e..a8e94fc9 100644
--- a/meshchatx/src/frontend/components/interfaces/Interface.vue
+++ b/meshchatx/src/frontend/components/interfaces/Interface.vue
@@ -9,12 +9,12 @@
<!-- Offline Overlay -->
<div
v-if="!isReticulumRunning"
- class="absolute inset-0 z-10 flex items-center justify-center bg-white/40 dark:bg-zinc-900/40 backdrop-blur-[1px] rounded-3xl"
+ class="absolute inset-0 z-10 flex items-center justify-center bg-white/20 dark:bg-zinc-900/20 backdrop-blur-[0.5px] rounded-3xl pointer-events-none"
>
<div
- class="bg-red-500 text-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2 text-sm font-bold"
+ class="bg-red-500/90 text-white px-3 py-1.5 rounded-full shadow-lg flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider"
>
- <MaterialDesignIcon icon-name="lan-disconnect" class="w-4 h-4" />
+ <MaterialDesignIcon icon-name="lan-disconnect" class="w-3.5 h-3.5" />
<span>Reticulum Offline</span>
</div>
</div>
@@ -22,12 +22,12 @@
<!-- Restart Required Overlay -->
<div
v-if="isReticulumRunning && iface._restart_required"
- class="absolute inset-0 z-10 flex items-center justify-center bg-white/40 dark:bg-zinc-900/40 backdrop-blur-[1px] rounded-3xl"
+ class="absolute inset-0 z-10 flex items-center justify-center bg-white/20 dark:bg-zinc-900/20 backdrop-blur-[0.5px] rounded-3xl pointer-events-none"
>
<div
- class="bg-amber-500 text-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2 text-sm font-bold animate-pulse"
+ class="bg-amber-500/90 text-white px-3 py-1.5 rounded-full shadow-lg flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider"
>
- <MaterialDesignIcon icon-name="restart" class="w-4 h-4" />
+ <MaterialDesignIcon icon-name="restart" class="w-3.5 h-3.5" />
<span>{{ $t("interfaces.restart_required") }}</span>
</div>
</div>
diff --git a/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue b/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue
index 9d33158f..be5681ac 100644
--- a/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue
@@ -6,7 +6,7 @@
<div class="p-3 md:p-6 space-y-4 w-full flex-1">
<div
v-if="showRestartReminder"
- class="bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-3xl shadow-xl p-4 flex flex-wrap gap-3 items-center"
+ class="bg-amber-600 text-white rounded-3xl shadow-xl p-4 flex flex-wrap gap-3 items-center"
>
<div class="flex items-center gap-3">
<MaterialDesignIcon icon-name="alert" class="w-6 h-6" />
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────